<template>
    <div class="app-container">
        <el-row>
            <el-col :span="12">
                <h3>添加讲师</h3>
                <el-form
                    :model="saveForm"
                    ref="saveFormRef"
                    :rules="saveFormRules"
                    label-width="80px"
                    size="normal"
                >
                    <el-form-item label="讲师名称" prop="name">
                        <el-input v-model="saveForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="讲师排序" prop="sort">
                        <el-input-number
                            controls-position="right"
                            :min="0"
                            v-model="saveForm.sort"
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item label="讲师头衔" prop="level">
                        <el-select
                            v-model="saveForm.level"
                            placeholder="请选择"
                        >
                            <el-option
                                key="0"
                                label="-请选择-"
                                value=""
                            ></el-option>
                            <el-option
                                key="1"
                                label="高级讲师"
                                :value="1"
                            ></el-option>
                            <el-option
                                key="2"
                                label="首席讲师"
                                :value="2"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="讲师资历" prop="career">
                        <el-input v-model="saveForm.career"></el-input>
                    </el-form-item>
                    <el-form-item label="讲师头像" prop="avatar">
                        <el-upload
                            class="avatar-uploader"
                            :action="BASE_API+'/eduoss/fileoss'"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            :on-remove="handleRemove"
                        >
                            <img
                                v-if="imageUrl"
                                :src="imageUrl"
                                class="avatar"
                            />
                            <i
                                v-else
                                class="el-icon-plus avatar-uploader-icon"
                            ></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="讲师简介" prop="intro">
                        <el-input
                            type="textarea"
                            :rows="3"
                            placeholder="请输入讲师简介"
                            v-model="saveForm.intro"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSave"
                            >保存</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import teacherApi from "@/api/teacher";
export default {
    data() {
        return {
            saveForm: {
                id: null,
                name: null,
                sort: 0,
                career: null,
                intro: null,
                level: null,
                avatar: "",
            },
            imageUrl:"",
            BASE_API:process.env.BASE_API,
            saveFormRules: {
                name: [
                    {
                        required: true,
                        message: "讲师名称不能为空",
                        trigger: "blur",
                    },
                ],
                sort: [
                    {
                        required: true,
                        message: "讲师排序不能为空",
                        trigger: "blur",
                    },
                ],
                career: [
                    {
                        required: true,
                        message: "讲师资历不能为空",
                        trigger: "blur",
                    },
                ],
                level: [
                    {
                        required: true,
                        message: "讲师头衔不能为空",
                        trigger: "change",
                    },
                ],
                intro: [
                    {
                        required: true,
                        message: "讲师简介不能为空",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.init();
        console.log(this.BASE_API);
    },
    watch: {
        $route(to, from) {
            this.init();
        },
    },
    methods: {
        // 初始化项目
        init() {
            if (this.$route.query.id) {
                this.getTeacher(this.$route.query.id);
            } else {
                this.saveForm = {};
            }
        },
        // 点击保存
        handleSave() {
            this.$refs.saveFormRef.validate((v) => {
                if (v) {
                    if (!this.saveForm.id) {
                        this.handleAdd();
                    } else {
                        this.handleEdit();
                    }
                }
            });
        },
        // 添加
        async handleAdd() {
            let res = await teacherApi.addTeacher(this.saveForm);
            console.log(res);
            if (res.success) {
                this.$message.success("添加讲师成功");
                this.$router.push("/teacher/list");
            }
        },
        // 修改
        async handleEdit() {
            let res = await teacherApi.updateTeacher(this.saveForm);
            if (res.success) {
                this.$message.success("修改讲师成功");
                this.$router.push("/teacher/list");
            }
        },

        // 根据id查询
        async getTeacher(id) {
            let res = await teacherApi.getTeacher({ id: id });
            if (res.success) {
                this.saveForm = res.data.rows;
                this.imageUrl = this.saveForm.avatar
            } else {
                return this.$message.error(res.msg);
            }
        },
        // 头像上传成功后
        handleAvatarSuccess(res, file) {
            if(res.success) {
                this.imageUrl = res.data.url;
                this.saveForm.avatar = this.imageUrl;
            }
        },
        // 头像上传成功前
        beforeAvatarUpload(file) {
            const isLt1M = file.size / 1024 / 1024 < 1;
            if (!isLt1M) {
                this.$message.error("上传头像图片大小不能超过 1MB!");
            }
            return isLt1M;
        },
        handleRemove(file,fileList) {
            console.log(file);
            console.log(fileList);
        }
    },
};
</script>

<style lang="scss" scoped>
::v-deep.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>